{% extends 'base.html' %}
{% load static %}

{% block title %}编辑活动 - {{ activity.title }}{% endblock %}

{% block content %}
<div class="container" style="max-width: 900px; margin: 2rem auto;">
    <h2 class="mb-4"><i class="fas fa-edit"></i> 编辑活动</h2>
    
    <div class="card card-custom">
        <div class="card-body p-4">
            <form id="editActivityForm">
                {% csrf_token %}
                
                <div class="mb-3">
                    <label class="form-label-custom">活动标题</label>
                    <input type="text" class="form-control form-control-custom" id="title" value="{{ activity.title }}" required>
                </div>
                
                <div class="mb-3">
                    <label class="form-label-custom">活动类型</label>
                    <select class="form-select form-control-custom" id="activityType">
                        <option value="{{ activity.activity_type.id }}">{{ activity.activity_type.name }}</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label class="form-label-custom">活动描述</label>
                    <textarea class="form-control form-control-custom" id="description" rows="6" required>{{ activity.description }}</textarea>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label-custom">开始时间</label>
                        <input type="datetime-local" class="form-control form-control-custom" id="startTime" value="{{ activity.start_time|date:'Y-m-d\TH:i' }}" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label-custom">结束时间</label>
                        <input type="datetime-local" class="form-control form-control-custom" id="endTime" value="{{ activity.end_time|date:'Y-m-d\TH:i' }}" required>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label class="form-label-custom">地点名称</label>
                    <input type="text" class="form-control form-control-custom" id="locationName" value="{{ activity.location_name }}" required>
                </div>
                
                <div class="mb-3">
                    <label class="form-label-custom">详细地址</label>
                    <input type="text" class="form-control form-control-custom" id="locationAddress" value="{{ activity.location_address }}" required>
                </div>
                
                <div class="mb-3">
                    <label class="form-label-custom">最大参与人数</label>
                    <input type="number" class="form-control form-control-custom" id="maxParticipants" value="{{ activity.max_participants }}" min="1" required>
                </div>
                
                <div class="mb-3">
                    <label class="form-label-custom">活动状态</label>
                    <select class="form-select form-control-custom" id="status">
                        <option value="draft" {% if activity.status == 'draft' %}selected{% endif %}>草稿</option>
                        <option value="published" {% if activity.status == 'published' %}selected{% endif %}>已发布</option>
                        <option value="ongoing" {% if activity.status == 'ongoing' %}selected{% endif %}>进行中</option>
                        <option value="completed" {% if activity.status == 'completed' %}selected{% endif %}>已完成</option>
                        <option value="cancelled" {% if activity.status == 'cancelled' %}selected{% endif %}>已取消</option>
                    </select>
                </div>
                
                <div class="d-grid gap-2">
                    <button type="button" class="btn btn-gradient-primary" onclick="saveChanges()">
                        <i class="fas fa-save"></i> 保存修改
                    </button>
                    <a href="{% url 'activities:detail' activity.id %}" class="btn btn-outline-secondary">
                        取消
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function saveChanges() {
    const data = {
        title: document.getElementById('title').value,
        description: document.getElementById('description').value,
        activity_type: document.getElementById('activityType').value,
        start_time: document.getElementById('startTime').value,
        end_time: document.getElementById('endTime').value,
        location_name: document.getElementById('locationName').value,
        location_address: document.getElementById('locationAddress').value,
        max_participants: document.getElementById('maxParticipants').value,
        status: document.getElementById('status').value,
    };
    
    axios.put('/api/activities/{{ activity.id }}/', data)
        .then(response => {
            showSuccess('保存成功');
            setTimeout(() => {
                window.location.href = '{% url "activities:detail" activity.id %}';
            }, 1000);
        })
        .catch(error => {
            showError('保存失败');
        });
}
</script>
{% endblock %}
